<template>
    <div :class="currentElementList.indexOf(element) >= 0 ? 'box active' : 'box'" :style="style.getBoxStyle(element)" @mousedown="boxMouseDown($event)" @dblclick="boxDbClick($event, element)">
        <span v-if="currentElementList.length == 1 && currentElementList[0] == element && base.validateBox(element).length == 0 && !element.attribute.locked" class="iconfont icon-rotate" :style="getRotateStyle()" @mousedown="rotateMouseDown"></span>
        <span class="iconfont icon-lock" v-if="currentElementList.indexOf(element) >= 0 && (element.attribute.locked || base.validateBox(element).length > 0)"></span>
        <div v-if="currentElementList.length == 1 && currentElementList[0] == element && !element.attribute.locked && base.validateBox(element).length == 0">
            <div class="shape-point" v-for="item in pointList" :key="item" :style="getPointStyle(item)" @mousedown="pointMouseDown(item, $event)">
            </div>
        </div>
        <slot></slot>
        <div v-if="element.attribute.highlight" class="highlight"></div>
        <span class="serial-number" v-if="currentElementList.length > 1 && currentElementList.indexOf(element) >= 0">{{ currentElementList.indexOf(element) + 1 }}</span>
        <span v-if="currentElementList.indexOf(element) >= 0" class="attribute-postion">
            <svg width="100%" height="100%">
                <text x="0" y="9" style="fill: white; font-size: 9px;" v-html="getPostionText()"></text>
            </svg>
        </span>
        <div v-if="element.component ==='Group'" :id="window.getRootName() + 'GROUP'">
            <Box v-for="(item) in store.getChildrenElementListById(element)" :element="item" :key="item.id" :id="system.SYSTEM_EDIT_BOX + item.id" :style="{
                    ...style.getBoxStyle(item),
                    top: util.toInteger(item.attribute.pOption.groupStyle.top.pixel * element.style.height.pixel) + 'px',
                    left: util.toInteger(item.attribute.pOption.groupStyle.left.pixel * element.style.width.pixel) + 'px',
                    height: util.toInteger(item.attribute.pOption.groupStyle.height.pixel * element.style.height.pixel) + 'px',
                    width: util.toInteger(item.attribute.pOption.groupStyle.width.pixel * element.style.width.pixel) + 'px',
                }">
                <component :key="item.id" :is="item.component" :mode="1" :pageList="pageList" :element="item" :style="{
                        ...style.getElementStyle(item),
                        height: util.toInteger(item.attribute.pOption.groupStyle.height.pixel * element.style.height.pixel) + 'px',
                        width: util.toInteger(item.attribute.pOption.groupStyle.width.pixel * element.style.width.pixel) + 'px',
                    }" :id="system.SYSTEM_EDIT_ELEMENT + item.id" v-if="getIfshow(item)" />
            </Box>
        </div>
        <div class="panel-map" v-if="coverMap[element.component]"></div>
    </div>
</template>

<script>
import util from '@/js/util/util.js';
import store from '@/js/store/state.js';
import style from '@/js/util/style.js';
import base from '@/js/main/attribute/base.js';
import bus from '@/js/event/bus.js';
import status from '@/js/main/status.js';
import history from '@/js/main/history.js';
import line from '@/js/main/line.js';
import animation from '@/js/main/animation.js';
import system from '@/js/main/system.js';
import register from '@/js/main/register.js';
import vueMixin from "@/js/main/vueMixin.js";
import user from '@/js/util/user.js';
import shortcut from '@/js/main/shortcut.js';

export default {
    mixins: [vueMixin],
    props: {
        element: {
            require: true,
            type: Object
        },
        preview: {
            type: Boolean,
            default: false
        }
    },
    components: {
        Box: () => import('@/view/main/Box.vue')
    },
    data() {
        return {
            window: window,
            base: base,
            style: style,
            currentElementList: store.getCurrentElementList(),
            elementList: store.getElementList(),
            canvas: store.getCanvas(),
            pageList: store.getPageList(),
            flagMap: store.getElementFlagMap(),
            pointList: ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l'], // 八个方向
            coverMap: {
                CloudMap: true,
                Picture: true,
                Holo3dMap: true,
                VBotton: true,
                VIframe: true
            },
            util: util,
            system: system,
            store: store
        };
    },
    mounted() {
        bus.on('animation' + this.element.id, this.editRunAnimation);
    },
    destroyed() {
        bus.off('animation' + this.element.id, this.editRunAnimation);
    },
    methods: {
        editRunAnimation() {
            animation.run(this.$el, this.currentElementList[0].animate);
        },
        getRotateStyle() {
            let scale = store.getScale();
            if (scale > 1) {
                scale = 1;
            }
            let size = 20 / scale;
            let top = -34 / scale;
            let style = {
                'font-size': size + 'px',
                top: top + 'px'
            };
            return style;
        },
        getPointStyle(point) {
            let width = this.element.style.width.pixel;
            let height = this.element.style.height.pixel;
            let hasT = /t/.test(point);
            let hasB = /b/.test(point);
            let hasL = /l/.test(point);
            let hasR = /r/.test(point);
            let newLeft = 0;
            let newTop = 0;
            // 四个角的点
            if (point.length === 2) {
                newLeft = hasL ? 0 : width;
                newTop = hasT ? 0 : height;
            } else {
                // 上下两点的点，宽度居中
                if (hasT || hasB) {
                    newLeft = width / 2;
                    newTop = hasT ? 0 : height;
                }
                // 左右两边的点，高度居中
                if (hasL || hasR) {
                    newLeft = hasL ? 0 : width;
                    newTop = util.toInteger(height / 2);
                }
            }
            let scale = store.getScale();
            if (scale > 1) {
                scale = 1;
            }
            let size = 9 / scale;
            let style = {
                marginLeft: hasR ? -size / 2 + 'px' : -size / 2 + 'px',
                marginTop: -size / 2 + 'px',
                left: `${newLeft}px`,
                top: `${newTop}px`,
                width: `${size}px`,
                height: `${size}px`
            };
            return style;
        },
        boxMouseDown(e) {
            if (e.button === 2) {
                if (user.getPanel() === 'true') {
                    bus.showContext(e);
                }
                return false;
            }
            if (this.flagMap[this.element.id] === false) {
                e.stopPropagation();
                this.boxMouseDownDb(e, this.element);
                return false
            } 
            if (status.isBoxMove() && this.flagMap[this.element.id]) {
                if (this.element.attribute.hasOwnProperty("pOption") && this.element.attribute.pOption.hasOwnProperty("pid")) {
                    return false;
                }
                e.stopPropagation();
                store.resetElementFlagMap();
                let index = this.currentElementList.indexOf(this.element);
                if (e.ctrlKey) {
                    if (index >= 0 && this.currentElementList.length > 1) {
                        store.removeCurrentElementAt(index);
                    }
                    if (index < 0) {
                        store.addCurrentElement(this.element);
                    }
                } else {
                    if (index < 0) {
                        store.setCurrentElementList([this.element]);
                    }
                }
                if (this.currentElementList.length > 1) {
                    for (let i = this.currentElementList.length - 1; i >= 0; i--) {
                        let item = this.currentElementList[i];
                        if (item.attribute.locked || base.validateBox(item).length > 0) {
                            store.removeCurrentElementAt(i);
                        }
                    }
                }
                if (!this.element.attribute.locked && base.validateBox(this.element).length == 0) {
                    status.setBoxMove(false);
                    let elementStartList = [];
                    let elementChildrenStartList = [];
                    // let childrenList = [];
                    for (let i = 0; i < this.currentElementList.length; i++) {
                        let item = this.currentElementList[i];
                        if (item.component === 'Group') {
                            for (let index = 0; index < this.currentElementList[i].attribute.children.length; index++) {
                                const children = this.currentElementList[i].attribute.children[index];
                                elementChildrenStartList.push({
                                    top: {
                                        pixel: children.style.top.pixel,
                                        unit: children.style.top.unit
                                    },
                                    left: {
                                        pixel: children.style.left.pixel,
                                        unit: children.style.left.unit
                                    },
                                    id: children.id
                                })
                            }
                            // childrenList = store.getChildrenElementListById(item);
                        }
                        elementStartList.push({
                            top: {
                                pixel: item.style.top.pixel,
                                unit: item.style.top.unit
                            },
                            left: {
                                pixel: item.style.left.pixel,
                                unit: item.style.left.unit
                            },
                            id: item.id
                        });
                    }
                    let startX = e.clientX;
                    let startY = e.clientY;
                    let updateInput = this.currentElementList.length == 1;
                    let hasMove = false;
                    let _this = this;
                    let moveX = startX;
                    let moveY = startY;
                    let move = function(e) {
                        hasMove = true;
                        let curX = e.clientX;
                        let curY = e.clientY;
                        let directX = curX - moveX;
                        let directY = curY - moveY;
                        moveX = curX;
                        moveY = curY;
                        let offsetX = util.toInteger((curX - startX) / store.getScale());
                        let offsetY = util.toInteger((curY - startY) / store.getScale());
                        for (let i = 0; i < _this.currentElementList.length; i++) {
                            let element = elementStartList[i];
                            let left = offsetX + element.left.pixel;
                            let top = offsetY + element.top.pixel;
                            base.setTopPixel(_this.currentElementList[i], _this.canvas.height, top, updateInput);
                            base.setLeftPixel(_this.currentElementList[i], _this.canvas.width, left, updateInput);
                            if (_this.currentElementList[i].component === 'Group') {
                                for (let index = 0; index < _this.currentElementList[i].attribute.children.length; index++) {
                                    let element = elementChildrenStartList[index];
                                    let left = offsetX + element.left.pixel;
                                    let top = offsetY + element.top.pixel;
                                    const children = _this.currentElementList[i].attribute.children[index];
                                    base.setTopPixel(children, _this.canvas.height, top, updateInput);
                                    base.setLeftPixel(children, _this.canvas.width, left, updateInput);
                                }
                            }
                            // if (_this.currentElementList[i].component === 'Group') {
                            //     for (let index = 0; index < childrenList.length; index++) {
                            //         const element = elementChildrenStartList[index];
                            //         let left = offsetX + element.left.pixel;
                            //         let top = offsetY + element.top.pixel;
                            //         base.setTopPixel(childrenList[index], _this.canvas.height, top, updateInput);
                            //         base.setLeftPixel(childrenList[index], _this.canvas.width, left, updateInput);
                            //     }
                            // }
                        }
                        if (_this.currentElementList.length == 1) {
                            line.removeLine();
                            line.setXLine(directX, _this.currentElementList[0], _this.canvas.width);
                            line.setYLine(directY, _this.currentElementList[0], _this.canvas.height);
                        }
                    };
                    let up = function(e) {
                        document.removeEventListener('mousemove', move);
                        document.removeEventListener('mouseup', up);
                        status.setBoxMove(true);
                        hasMove && history.addHistory(store.clone(), 3);
                        hasMove && line.setElementList(_this.currentElementList);
                        line.removeLine();
                    };
                    document.addEventListener('mousemove', move);
                    document.addEventListener('mouseup', up);
                }
                bus.hideContext();
            }
        },
        boxDbClick(e, element) {
            if (element.attribute.hasOwnProperty("pOption") && element.attribute.pOption.hasOwnProperty("pid")) {
                e.stopPropagation();
                if (status.isBoxMove()) {
                    e.stopPropagation();
                    if (element.id) {
                        // let id = element.id.replace(system.SYSTEM_EDIT_BOX, '');
                        // let current = store.getElementById(element.id);
                        store.setCurrentElementList([]);
                        store.setCurrentElementList([element]);
                        store.setElementFlagMapById(element.id, false);
                    }
                }
            }
        },
        boxMouseDownDb(e, current) {
            let parent = store.getElementById(current.attribute.pOption.pid);
            let elementStartList = {
                top: {
                    pixel: current.style.top.pixel,
                    unit: current.style.top.unit
                },
                left: {
                    pixel: current.style.left.pixel,
                    unit: current.style.left.unit
                },
                id: current.id
            };
            let startX = e.clientX;
            let startY = e.clientY;
            let updateInput = true;
            let _this = this;
            this.move = true;
            let left = +document.getElementById(system.SYSTEM_EDIT_BOX + current.id).style.left.replace('px', '');
            let top = +document.getElementById(system.SYSTEM_EDIT_BOX + current.id).style.top.replace('px', '');
            let move = function(e) {
                let curX = e.clientX;
                let curY = e.clientY;
                let offsetX = util.toInteger((curX - startX) / store.getScale());
                let offsetY = util.toInteger((curY - startY) / store.getScale());
                document.getElementById(system.SYSTEM_EDIT_BOX + current.id).style.left = (offsetX + left) + 'px';
                document.getElementById(system.SYSTEM_EDIT_BOX + current.id).style.top = (offsetY + top) + 'px';
            };
            let up = function(e) {
                let curX = e.clientX;
                let curY = e.clientY;
                let offsetX = util.toInteger((curX - startX) / store.getScale());
                let offsetY = util.toInteger((curY - startY) / store.getScale());
                let left = offsetX + elementStartList.left.pixel;
                let top = offsetY + elementStartList.top.pixel;
                base.setTopPixel(current, _this.canvas.height, top, updateInput);
                base.setLeftPixel(current, _this.canvas.width, left, updateInput);
                shortcut.resetBoxGroup(parent, parent.attribute.children, current, true);
                
                document.removeEventListener('mousemove', move);
                document.removeEventListener('mouseup', up);
            };
            document.addEventListener('mousemove', move);
            document.addEventListener('mouseup', up);
        },
        rotateMouseDown(e) {
            if (status.isBoxRotate()) {
                e.stopPropagation();
                status.setBoxRotate(false);
                let startRotate = this.element.style.rotate;
                let startX = e.clientX;
                let startY = e.clientY;
                let rect = this.$el.getBoundingClientRect();
                let centerX = rect.left + rect.width / 2;
                let centerY = rect.top + rect.height / 2;
                let startDegree = Math.atan2(startY - centerY, startX - centerX) / (Math.PI / 180);
                let hasMove = false;
                let _this = this;
                let move = function(e) {
                    let endDegree = Math.atan2(e.clientY - centerY, e.clientX - centerX) / (Math.PI / 180);
                    let rotate = Number((startRotate + endDegree - startDegree).toFixed(2));
                    base.setRotate(_this.element, rotate);
                    hasMove = true;
                };
                let up = function(e) {
                    document.removeEventListener('mousemove', move);
                    document.removeEventListener('mouseup', up);
                    status.setBoxRotate(true);
                    hasMove && history.addHistory(store.clone(), 4);
                    hasMove && line.setElement(_this.element);
                };
                document.addEventListener('mousemove', move);
                document.addEventListener('mouseup', up);
                bus.hideContext();
            }
        },
        pointMouseDown(key, e) {
            if (status.isBoxResize()) {
                e.stopPropagation();
                status.setBoxResize(false);
                let startPoint = {
                    x: e.clientX,
                    y: e.clientY
                };
                let box = {
                    start: { x: 0, y: 0 }, // 鼠标点击对角点
                    end: { x: 0, y: 0 }, // 鼠标点击当前点
                    realStart: { x: 0, y: 0 }, // 鼠标点击对角点旋转后真实坐标
                    realEnd: { x: 0, y: 0 }, // 鼠标点击当前点旋转后真实坐标
                    width: this.element.style.width.pixel,
                    height: this.element.style.height.pixel,
                    left: this.element.style.left.pixel,
                    top: this.element.style.top.pixel
                };
                if (key == 'lt') {
                    box.start.x = this.element.style.left.pixel + this.element.style.width.pixel + 1;
                    box.start.y = this.element.style.top.pixel + this.element.style.height.pixel + 1;
                    box.end.x = this.element.style.left.pixel;
                    box.end.y = this.element.style.top.pixel;
                } else if (key == 't') {
                    box.start.x = this.element.style.left.pixel + (this.element.style.width.pixel + 1) / 2;
                    box.start.y = this.element.style.top.pixel + this.element.style.height.pixel + 1;
                    box.end.x = this.element.style.left.pixel + (this.element.style.width.pixel + 1) / 2;
                    box.end.y = this.element.style.top.pixel;
                } else if (key == 'rt') {
                    box.start.x = this.element.style.left.pixel;
                    box.start.y = this.element.style.top.pixel + this.element.style.height.pixel + 1;
                    box.end.x = this.element.style.left.pixel + this.element.style.width.pixel + 1;
                    box.end.y = this.element.style.top.pixel;
                } else if (key == 'r') {
                    box.start.x = this.element.style.left.pixel;
                    box.start.y = this.element.style.top.pixel + (this.element.style.height.pixel + 1) / 2;
                    box.end.x = this.element.style.left.pixel + this.element.style.width.pixel + 1;
                    box.end.y = this.element.style.top.pixel + (this.element.style.height.pixel + 1) / 2;
                } else if (key == 'rb') {
                    box.start.x = this.element.style.left.pixel;
                    box.start.y = this.element.style.top.pixel;
                    box.end.x = this.element.style.left.pixel + this.element.style.width.pixel + 1;
                    box.end.y = this.element.style.top.pixel + this.element.style.height.pixel + 1;
                } else if (key == 'b') {
                    box.start.x = this.element.style.left.pixel + (this.element.style.width.pixel + 1) / 2;
                    box.start.y = this.element.style.top.pixel;
                    box.end.x = this.element.style.left.pixel + (this.element.style.width.pixel + 1) / 2;
                    box.end.y = this.element.style.top.pixel + this.element.style.height.pixel + 1;
                } else if (key == 'lb') {
                    box.start.x = this.element.style.left.pixel + this.element.style.width.pixel + 1;
                    box.start.y = this.element.style.top.pixel;
                    box.end.x = this.element.style.left.pixel;
                    box.end.y = this.element.style.top.pixel + this.element.style.height.pixel + 1;
                } else if (key == 'l') {
                    box.start.x = this.element.style.left.pixel + this.element.style.width.pixel + 1;
                    box.start.y = this.element.style.top.pixel + (this.element.style.height.pixel + 1) / 2;
                    box.end.x = this.element.style.left.pixel;
                    box.end.y = this.element.style.top.pixel + (this.element.style.height.pixel + 1) / 2;
                }
                box.realStart = util.rotateCoordinate(box.start, { x: this.element.style.left.pixel + (box.width + 1) / 2, y: this.element.style.top.pixel + (box.height + 1) / 2 }, this.element.style.rotate);
                box.realEnd = util.rotateCoordinate(box.end, { x: this.element.style.left.pixel + (box.width + 1) / 2, y: this.element.style.top.pixel + (box.height + 1) / 2 }, this.element.style.rotate);
                box.realStart.x = util.toInteger(box.realStart.x);
                box.realStart.y = util.toInteger(box.realStart.y);
                box.realEnd.x = util.toInteger(box.realEnd.x);
                box.realEnd.y = util.toInteger(box.realEnd.y);
                let needSave = false;
                let _this = this;
                let setExtent = function(extent, proportion0) {
                    let proportion1 = extent.width / extent.height;
                    if (proportion1 > proportion0) {
                        extent.width = util.toInteger(proportion0 * extent.height);
                    } else {
                        extent.height = util.toInteger(extent.width / proportion0);
                    }
                };
                let proportion = this.element.style.width.pixel / this.element.style.height.pixel;
                let move = function(e) {
                    let minSize = 20;
                    let lockProportion = e.shiftKey;
                    let endPoint = {
                        x: e.clientX,
                        y: e.clientY
                    };
                    let offset = {
                        x: (endPoint.x - startPoint.x) / store.getScale(),
                        y: (endPoint.y - startPoint.y) / store.getScale()
                    };
                    offset = util.rotateCoordinate(offset, { x: 0, y: 0 }, -_this.element.style.rotate);
                    offset.x = util.toInteger(offset.x);
                    offset.y = util.toInteger(offset.y);
                    let start = { x: 0, y: 0 };
                    let extent = {
                        width: _this.element.style.width.pixel,
                        height: _this.element.style.height.pixel
                    };
                    if (lockProportion) {
                        if (isNaN(proportion)) {
                            proportion = _this.element.style.width.pixel / _this.element.style.height.pixel;
                        }
                    } else {
                        proportion = NaN;
                    }
                    if (key == 'lt') {
                        extent.width = box.width - offset.x;
                        extent.height = box.height - offset.y;
                        if (extent.width < minSize) {
                            extent.width = minSize;
                        }
                        if (extent.height < minSize) {
                            extent.height = minSize;
                        }
                        lockProportion && setExtent(extent, proportion);
                        start.x = box.left + extent.width + 1;
                        start.y = box.top + extent.height + 1;
                    } else if (key == 't') {
                        extent.height = box.height - offset.y;
                        if (extent.height < minSize) {
                            extent.height = minSize;
                        }
                        if (lockProportion) {
                            extent.width = util.toInteger(proportion * extent.height);
                        }
                        start.x = box.left + (extent.width + 1) / 2;
                        start.y = box.top + extent.height + 1;
                    } else if (key == 'rt') {
                        extent.width = box.width + offset.x;
                        extent.height = box.height - offset.y;
                        if (extent.width < minSize) {
                            extent.width = minSize;
                        }
                        if (extent.height < minSize) {
                            extent.height = minSize;
                        }
                        lockProportion && setExtent(extent, proportion);
                        start.x = box.left;
                        start.y = box.top + extent.height + 1;
                    } else if (key == 'r') {
                        extent.width = box.width + offset.x;
                        if (extent.width < minSize) {
                            extent.width = minSize;
                        }
                        if (lockProportion) {
                            extent.height = util.toInteger(extent.width / proportion);
                        }
                        start.x = box.left;
                        start.y = box.top + (extent.height + 1) / 2;
                    } else if (key == 'rb') {
                        extent.width = box.width + offset.x;
                        extent.height = box.height + offset.y;
                        if (extent.width < minSize) {
                            extent.width = minSize;
                        }
                        if (extent.height < minSize) {
                            extent.height = minSize;
                        }
                        lockProportion && setExtent(extent, proportion);
                        start.x = box.left;
                        start.y = box.top;
                    } else if (key == 'b') {
                        extent.height = box.height + offset.y;
                        if (extent.height < minSize) {
                            extent.height = minSize;
                        }
                        if (lockProportion) {
                            extent.width = util.toInteger(proportion * extent.height);
                        }
                        start.x = box.left + (extent.width + 1) / 2;
                        start.y = box.top;
                    } else if (key == 'lb') {
                        extent.width = box.width - offset.x;
                        extent.height = box.height + offset.y;
                        if (extent.width < minSize) {
                            extent.width = minSize;
                        }
                        if (extent.height < minSize) {
                            extent.height = minSize;
                        }
                        lockProportion && setExtent(extent, proportion);
                        start.x = box.left + extent.width + 1;
                        start.y = box.top;
                    } else if (key == 'l') {
                        extent.width = box.width - offset.x;
                        if (extent.width < minSize) {
                            extent.width = minSize;
                        }
                        if (lockProportion) {
                            extent.height = util.toInteger(extent.width / proportion);
                        }
                        start.x = box.left + extent.width + 1;
                        start.y = box.top + (extent.height + 1) / 2;
                    }
                    let center = {
                        x: box.left + (extent.width + 1) / 2,
                        y: box.top + (extent.height + 1) / 2
                    };
                    start = util.rotateCoordinate(start, center, _this.element.style.rotate);
                    start.x = util.toInteger(start.x);
                    start.y = util.toInteger(start.y);
                    let offsetX = start.x - box.realStart.x;
                    let offsetY = start.y - box.realStart.y;
                    base.setTopPixel(_this.element, _this.canvas.height, util.toInteger(box.top - offsetY));
                    base.setLeftPixel(_this.element, _this.canvas.width, util.toInteger(box.left - offsetX));
                    base.setHeightPixel(_this.element, _this.canvas.height, extent.height);
                    base.setWidthPixel(_this.element, _this.canvas.width, extent.width);
                    shortcut.changeBoxGroup(_this.element);
                    needSave = true;
                };
                let up = function(e) {
                    register.redraw(system.SYSTEM_EDIT_ELEMENT + _this.element.id);
                    document.removeEventListener('mousemove', move);
                    document.removeEventListener('mouseup', up);
                    status.setBoxResize(true);
                    needSave && history.addHistory(store.clone(), 5);
                    needSave && line.setElement(_this.element);
                };
                document.addEventListener('mousemove', move);
                document.addEventListener('mouseup', up);
                bus.hideContext();
            }
        },
        getPostionText() {
            let text = '';
            if (util.isNotBlank(this.element.style.left.value)) {
                text += '&nbsp;L:' + this.element.style.left.value + this.element.style.left.unit;
            }
            if (util.isNotBlank(this.element.style.top.value)) {
                text += '&nbsp;T:' + this.element.style.top.value + this.element.style.top.unit;
            }
            if (util.isNotBlank(this.element.style.width.value)) {
                text += '&nbsp;W:' + this.element.style.width.value + this.element.style.width.unit;
            }
            if (util.isNotBlank(this.element.style.height.value)) {
                text += '&nbsp;H:' + this.element.style.height.value + this.element.style.height.unit;
            }
            if (util.isNotBlank(this.element.style.bottom.value)) {
                text += '&nbsp;B:' + this.element.style.bottom.value + this.element.style.bottom.unit;
            }
            if (util.isNotBlank(this.element.style.right.value)) {
                text += '&nbsp;R:' + this.element.style.right.value + this.element.style.right.unit;
            }
            if (util.isNotBlank(this.element.style.rotate)) {
                text += '&nbsp;A:' + this.element.style.rotate + '°';
            }
            return text;
        },
        getShow(item) {
            let visible = false;
            if (this.pageList[item.attribute.page].visible || item.attribute.visible) {
                visible = true;
            }
            if (this.pageList[item.attribute.page].visible === false) {
                visible = false
            }
            if (item.attribute.visible === false) {
                visible = false;
            }
            return visible
        },
        getIfshow(item) {
            let visible = false;
            if (item.component === 'VHtml') {
                visible = true;
            } else {
                visible = false;
            }
            return !this.preview || !visible;
        }
    }
};
</script>

<style lang="scss" scoped>
.box {
    position: absolute;
}
.active {
    outline: 1px solid #70c0ff;
    user-select: none;
}
.shape-point {
    position: absolute;
    background: $white;
    border: 1px solid #59c7f9;
    border-radius: 0;
    cursor: default;
    z-index: 3;
}
.icon-rotate {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 600;
    cursor: default;
    color: #59c7f9;
}
.icon-lock {
    position: absolute;
    top: 0;
    right: 0;
}
.serial-number {
    position: absolute;
    bottom: 1px;
    left: 5px;
    font-size: 8px;
    font-weight: bold;
    color: $red;
}
.attribute-postion {
    position: absolute;
    top: -12px;
    left: 0px;
    width: 200px;
    height: 11px;
    background-color: #0000ff;
}
.highlight {
    position: absolute;
    background-color: rgb(179, 63, 63);
    top: 0px;
    left: 0px;
    opacity: 0.4;
    height: 100%;
    width: 100%;
    position: absolute;
}
.panel-map {
    position: absolute;
    top: 0px;
    opacity: 0.01;
    width: 100%;
    height: 100%;
}
.job_layerDisabled__fYnjp {
    pointer-events: none;
}
</style>